import Home from './components/Home'
import Search from './components/Search'
import Comment from './components/Comment'
import { useEffect, useState } from 'react'

const App = () => {
  const [current, setCurrent] = useState('')

  useEffect(() => {
    // console.log(window.location.hash)

    const onChange = function () {
      setCurrent(window.location.hash.slice(1))
    }

    window.addEventListener('hashchange', onChange)

    return () => {
      window.removeEventListener('hashchange', onChange)
    }
  })

  return (
    <div className="app">
      <h1>app</h1>
      <div>
        <a href="#/home">首页</a>
        <a href="#/comment">评论</a>
        <a href="#/search">搜索</a>
      </div>
      {current === '/home' && <Home></Home>}
      {current === '/comment' && <Comment></Comment>}
      {current === '/search' && <Search></Search>}
    </div>
  )
}

export default App
